<template>
  <div class="outer" id="outer">
    <Transition name="tip">
      <p v-if="isHalfScreen" class="tip" @click="recover">点击空白处恢复全屏</p>
    </Transition>
    <div
      class="comment"
      :class="{
        'half-screen': isHalfScreen,
        'is-selecting': isSelecting,
        'is-left': isLeft
      }"
    >
      <main class="comment__main" :class="{ 'is-left': isLeft }" id="outer">
        <Header class="header" :current-similar="currentSimilar"></Header>
        <Content
          class="content"
          ref="contentRef"
          :scale="getScale"
          :current-similar="currentSimilar"
          :currentMode="currentMode"
          @half-screen="halfScreen"
        ></Content>
        <operate-bar class="tools" @draw="draw" @revert="revert" />
      </main>
      <side-bar
        class="side-bar"
        ref="sidebarRef"
        :is-confirm="isConfirm"
        @change-similar-question="changeSimilar"
      />
    </div>
  </div>
</template>
<script setup>
import Header from './components/Header.vue'
import OperateBar from './components/SketchpadTools.vue'
import SideBar from './components/SideBar.vue'
import Content from './components/Content.vue'
import $bus from '@/utils/tools/bus'
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
const currentMode = ref('select')
const contentRef = ref(null)
const isHalfScreen = ref(false)
const isConfirm = ref(false)
const sidebarRef = ref(null)
const currentSimilar = ref(0)
const isLeft = ref(false)

const recover = () => {
  contentRef.value.recoverFullScreen()
}

const halfScreen = val => {
  isHalfScreen.value = val
}

const getScale = computed(() => {
  if (sidebarRef.value) return sidebarRef.value.scale || 1
  return 1
})

const isSelecting = ref(false)

const draw = type => {
  currentMode.value = type
  if (type === 'select') {
    isSelecting.value = true
  } else {
    isSelecting.value = false
  }
  contentRef.value.draw(type)
}

const revert = type => {
  contentRef.value.revert(type)
}

const changeSimilar = val => {
  currentSimilar.value = val
}

onMounted(() => {
  $bus.on('reset-similar', () => {
    currentSimilar.value = 0
  })
  $bus.on('change-position', () => {
    isLeft.value = !isLeft.value
  })
  const flag = sessionStorage.getItem('is-left')
  isLeft.value = flag ? JSON.parse(flag) : false
})

onBeforeUnmount(() => {
  $bus.off('reset-similar')
})
</script>
<style lang="less" scoped>
.outer {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: relative;
  background: rgba(25, 43, 42, 1);

  .tip {
    background: black;
    position: relative;
    width: 100%;
    height: 33%;
    z-index: 999;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
  }
}

.comment {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: rgba(25, 43, 42, 1);

  &.is-left {
    flex-direction: row-reverse;
  }

  &.is-selecting {
    position: relative;
    z-index: 9999;
  }

  &.half-screen {
    height: 67%;
    position: absolute;
    top: 33%;
  }
  &__main {
    flex: 1;
    width: 0;
    display: flex;
    flex-direction: column;

    &.is-left {
      padding-left: 32px;
    }

    .header {
      height: 62px;
    }

    .content {
      flex: 1;
      overflow: auto;
    }
  }

  .side-bar {
    width: fit-content;
    flex-shrink: 0;
  }
}
</style>
